<template>
	<div class="synthesize">
		<div class="crumb">
			<el-breadcrumb separator-class="el-icon-arrow-right">
				<el-breadcrumb-item :to="{ path: '/webMain' }">校园论坛</el-breadcrumb-item>
				<el-breadcrumb-item>学习交流</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<div class="carousel-wrap">
			<Carousel/>
		</div>
		<div class="wrap">
			<div class="title-box">
				<div class="title-bar">
					<div class="title">学习交流</div>
					<div class="total">帖子数：{{ total }}</div>
				</div>
				<div class="tool-box">
					<div class="add-btn" @click="handlePublish()">发布帖子</div>
					<div class="search-box">
						<el-input
							placeholder="请输入关键词"
							suffix-icon="el-icon-search"
							v-model="keywords">
						</el-input>
					</div>
				</div>
			</div>
			<div class="content-box">
				<div class="main-part">
					<el-table
						:data="tableData"
						style="width: 100%"
						header-row-class-name="table-header"
						:row-class-name="tableRowClassName">
						<el-table-column
						prop="title"
						label="主题"
						>
							<template slot-scope="scope">
								<div class="theme" @click="handleRowDetail(scope.row)"><img src="@/assets/images/icons/file.png" alt="">{{ scope.row.title }}</div>
							</template>
						</el-table-column>
						<el-table-column
						prop="author"
						label="作者"
						width="100">
						</el-table-column>
						<el-table-column
						prop="replayNum"
						label="回复"
						width="100">
						</el-table-column>
						<el-table-column
						prop="seeNum"
						label="人气"
						width="100">
						</el-table-column>
						<el-table-column
						prop="date"
						label="更新时间"
						width="140">
						</el-table-column>
					</el-table>
					<pagination
					class="page"
					v-show="total>0"
					:total="total"
					:layout="'total, prev, pager, next'"
					:page.sync="pages.pageNum"
					:limit.sync="pages.pageSize"
					@pagination="pageCourse"
					/>
				</div>
				<div class="sub-part">
					<Hot />
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import Carousel from './carousel.vue';
import Hot from './hot.vue'
export default {
	name: 'Study',
	components: {
		Carousel,
		Hot
	},
	data() { 
		return {
			//检索关键字
			keywords: '',
			//数据
			tableData: [],
			//总数
			total: 100,
			//分页
			pages: {
				pageNum: 1,
				pageSize: 9,
			}
		}
	},
	mounted() { 
		this.queryData();
	},
	methods: {
		/**
		 * 查询数据
		 */
		queryData() { 
			let dataList = [
				{
					id: 1,
					title: '文法学院举办退休教师新春茶话会',
					date: '2025-01-16',
					author: '张三',
					replayNum: 1,
					seeNum: 1222
				},
				{
					id: 2,
					title: '文法学院举办退休教师新春茶话会',
					date: '2025-01-16',
					author: '张三',
					replayNum: 1,
					seeNum: 1222
				},
				{
					id: 3,
					title: '文法学院举办退休教师新春茶话会',
					date: '2025-01-16',
					author: '张三',
					replayNum: 1,
					seeNum: 1222
				},
				{
					id: 4,
					title: '宣城校区举行安徽省金汇发展教育基金会捐赠暨金汇奖学金颁奖仪式',
					date: '2025-01-16',
					author: '张三',
					replayNum: 1,
					seeNum: 1222
				},
				{
					id: 5,
					title: '文法学院举办退休教师新春茶话会',
					date: '2025-01-16',
					author: '张三',
					replayNum: 1,
					seeNum: 1222
				},
				{
					id: 6,
					title: '宣城校区举行安徽省金汇发展教育基金会捐赠暨金汇奖学金颁奖仪式',
					date: '2025-01-16',
					author: '张三',
					replayNum: 1,
					seeNum: 1222
				},
				{
					id: 7,
					title: '文法学院举办退休教师新春茶话会',
					date: '2025-01-16',
					author: '张三',
					replayNum: 1,
					seeNum: 1222
				},
				{
					id: 8,
					title: '宣城校区举行安徽省金汇发展教育基金会捐赠暨金汇奖学金颁奖仪式',
					date: '2025-01-16',
					author: '张三',
					replayNum: 1,
					seeNum: 1222
				},
				{
					id: 9,
					title: '文法学院举办退休教师新春茶话会',
					date: '2025-01-16',
					author: '张三',
					replayNum: 1,
					seeNum: 1222
				},
				{
					id: 10,
					title: '文法学院举办退休教师新春茶话会',
					date: '2025-01-16',
					author: '张三',
					replayNum: 1,
					seeNum: 1222
				},
				{
					id: 1,
					title: '文法学院举办退休教师新春茶话会',
					date: '2025-01-16',
					author: '张三',
					replayNum: 1,
					seeNum: 1222
				},
				{
					id: 2,
					title: '文法学院举办退休教师新春茶话会',
					date: '2025-01-16',
					author: '张三',
					replayNum: 1,
					seeNum: 1222
				},
				{
					id: 3,
					title: '文法学院举办退休教师新春茶话会',
					date: '2025-01-16',
					author: '张三',
					replayNum: 1,
					seeNum: 1222
				},
				{
					id: 4,
					title: '宣城校区举行安徽省金汇发展教育基金会捐赠暨金汇奖学金颁奖仪式',
					date: '2025-01-16',
					author: '张三',
					replayNum: 1,
					seeNum: 1222
				},
				{
					id: 5,
					title: '文法学院举办退休教师新春茶话会',
					date: '2025-01-16',
					author: '张三',
					replayNum: 1,
					seeNum: 1222
				},
				{
					id: 6,
					title: '宣城校区举行安徽省金汇发展教育基金会捐赠暨金汇奖学金颁奖仪式',
					date: '2025-01-16',
					author: '张三',
					replayNum: 1,
					seeNum: 1222
				},
				{
					id: 7,
					title: '文法学院举办退休教师新春茶话会',
					date: '2025-01-16',
					author: '张三',
					replayNum: 1,
					seeNum: 1222
				},
				{
					id: 8,
					title: '宣城校区举行安徽省金汇发展教育基金会捐赠暨金汇奖学金颁奖仪式',
					date: '2025-01-16',
					author: '张三',
					replayNum: 1,
					seeNum: 1222
				},
				{
					id: 9,
					title: '文法学院举办退休教师新春茶话会',
					date: '2025-01-16',
					author: '张三',
					replayNum: 1,
					seeNum: 1222
				},
				{
					id: 10,
					title: '文法学院举办退休教师新春茶话会',
					date: '2025-01-16',
					author: '张三',
					replayNum: 1,
					seeNum: 1222
				}
			];
			this.tableData = dataList;
		},
		/**
		 * 分页
		 */
		pageCourse() { 
			let s = (this.pages.pageNum - 1) * this.pages.pageSize;
			let e = this.pages.pageNum * this.pages.pageSize;
			// this.courseList = this.allCourseList.slice(s, e);
		},
		/**
		 * 详情
		 * @param item 
		 * @param type 
		 */
		handleRowDetail(row) { 
			// this.$router.push({
			// 	path: '/webDetail',
			// 	query: {
			// 		id: row.id
			// 	}
			// })
		},
		/**
		 * 发布帖子
		 */
		handlePublish() { 
			this.$router.push({
				path: '/publish',
				query: {
					type: '学习交流墙'
				}
			})
		},
		/**
		 * 行样式
		 * @param param0 
		 */
		tableRowClassName({row, rowIndex}) {
			if (rowIndex % 2 === 0) {
				return 'success-row';
			} 
			return '';
		}
	}
}
</script>

<style lang="scss" scoped>
.synthesize {
	width: 100%;
	min-height: 760px;
	.crumb {
		width: 1280px;
		margin: 0 auto;
		padding: 15px 0 15px 0;
	}
	.carousel-wrap {
		width: 1280px;
		margin: 0 auto;
	}
	.wrap {
		width: 1280px;
		height: auto;
		margin: 0 auto;
		.title-box {
			width: 100%;
			.title-bar {
				width: 100%;
				display: flex;
				flex-direction: row;
				align-items: flex-end;
				.title {
					font-size: 20px;
					font-weight: bold;
					margin-right: 20px;
				}
				.total {
					font-size: 14px;
				}
			}
			.tool-box {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				padding: 30px 0 20px 0;
				.add-btn {
					width: 80px;
					color: #fff;
					background-color: #80A681;
					padding: 5px 0;
					border-radius: 3px;
					text-align: center;
					font-size: 14px;
					cursor: pointer;
				}
				.search-box {
					width: 220px;
				}
			}
		}
		.content-box {
			display: flex;
			flex-direction: row;
			.theme {
				display: flex;
				flex-direction: row;
				align-items: center;
				cursor: pointer;
				img {
					width: 20px;
					margin-right: 5px;
				}
			}
			.main-part {
				width: calc(100% - 280px);
				padding-bottom: 50px;
			}
			.sub-part {
				width: 280px;
			}
		}
		.page {
			height: 50px;
		}
	}
}
::v-deep .search-box .el-input__inner {
	height: 32px;
	line-height: 32px;
}
::v-deep .table-header th{
	background-color: #d2dfd2;
}
::v-deep .el-table .el-table__cell {
	border: none !important;
}
::v-deep .el-table .warning-row {
	background: oldlace;
}

::v-deep .el-table .success-row {
	background: #f0f4f0;
}
::v-deep .search .el-input__inner {
	border: none;
}
::v-deep .pagination-container {
	padding: 10px 0 !important;
}
::v-deep .pagination-container .el-pagination {
	right: -10px !important;
}
</style>